<template>
	<div class="booksgit">
		<div class="tablist">
			<div class="swiper-container presslist">
				<ul class="tab swiper-wrapper">

					<li class="swiper-slide" v-for="(item,i) in pressList" :key="i">
						<a @click="Maker(item)">{{item}}</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="tablist">
			<div class="swiper-container presslist">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" v-for="(item,i) in categoryMenus" :key="i">
						<a @click="BooksType(item.name)">{{item.name}}</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="tablist">
			<div class="swiper-container presslist">
				<ul class="tab swiper-wrapper">

					<li class="swiper-slide" v-for="(item,i) in publicationDate" :key="i">
						<a @click="BookDate(item)">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="tablist">
			<div class="swiper-container presslist">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" v-for="(item,i) in version" :key="i">
						<a @click="Eva(item)">
					<li :v-show="type=true?true:false">{{item}}</li></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="z"></div>
		<div class="homelist">
			<ul>
				<template v-for="(item,index) in newslist" v-show="itme.status">
					<li :key="item.id" v-if="item.isShow==1">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
						<h3>{{item.name}}</h3>
						</li>
				</template>
			</ul>
		</div>
	</div>

</template>

<script>
	import Swiper from 'swiper';
	export default {
		data() {
			return {
				type: false,
				pressList: ['全部'],
				publicationDate: ['全部'],
				time: '',
				version: ['全部', '人气版', '好评版'],
				newslist: [],
				categoryMenus: [{
					name: '全部'
				}],
				maker: {
					state: ''
				},
				booktype: {
					state: ''
				},
				date: {
					state: ''
				},
				eva: {
					state: ''
				}
			}
		},
		mounted() {
			this.getAllBooksType();
			this.getAllBooks();
			//出版日期循环
			new Swiper('.presslist', {
				// slidesOff:4,
				spaceBetween: 20,
				slidesPerView: 'auto',
			})
		},
		methods: {
			Maker(item) {
				console.log(this.maker.state);
				if (item == '全部' || item == '') {
					this.maker.state = '';
					console.log(963)
				} else if (this.maker.state !='') {
					console.log(159)
					if (item == this.maker.state) {
						console.log(123)
						this.maker.state = ''
					} else {
						this.maker.state = item
					}
				} else {
					this.maker.state = item
				}
				console.log(this.maker)
				this.show();
			},
			BooksType(item) {
				if (item == '全部' || item == '') {
					this.booktype.state = '';
				} else if (this.booktype.state != '') {
					if (item == this.booktype.state) {
						this.booktype.state = ''
					} else {
						this.booktype.state = item
					}
				} else {
					this.booktype.state = item
				}
				this.show();
			},
			BookDate(item) {
				if (item == '全部' || item == '') {
					this.date.state = '';
				} else if (this.date.state != '') {
					if (item == this.date.state) {
						this.date.state = ''
					} else {
						this.date.state = item
					}
				} else {
					this.date.state = item
				}
				this.show();
			},
			Eva(item) {
				if (item == '全部' || item == '') {
					this.eva.state = '';
				} else if (this.eva.state != '') {
					if (item == this.eva.state) {
						this.eva.state = ''
					} else {
						this.eva.state = item
					}
				} else {
					this.eva.state = item
				}
				this.show();
			},
			show() {
				let m = this.maker.state
				console.log(m)
				let t = this.booktype.state
				console.log(t)
				let e = this.eva.state
				console.log(e)
				let d = this.date.state
				console.log(d)
				this.newslist.forEach((item) => {
					if ((m == '' || m == item.maker) && (d ==  ''|| d == new Date(item.tmake).getFullYear()  ) && (t == '' || t == item
							.type)) {
console.log(999)
						item.isShow = 1
					} else {
						console.log(666)
						item.isShow = 0
					}
				})
				console.log(this.newslist);
			},
			getAllBooks() {
				let fd = new FormData();
				fd.append("key", this.$route.query.key);
				this.$postf("/api/public/book/findPageKey/1/6",fd)
					.then((resp) => {
						console.log(resp.data.data);
						resp.data.data.books.forEach((item,i) => {
								item.isShow = 1;
							this.pressList.push(item.maker)
							this.newslist.push(item)
							this.publicationDate.push(new Date(item.tmake).getFullYear())
						})
					})
					console.log(this.newslist)
			},
			getAllBooksType() {
				this.$axios.get("http://127.0.0.1/api/public/type/findAll2")
					.then((resp) => {
						console.log(resp.data.data);
						resp.data.data.forEach((item) => {
							this.categoryMenus.push(item)
						})
					})
			},

		}
	}
</script>

<style scoped>
	.booksgit {
		width: 100%;
		background-color: #F5D5A0;

	}

	.booksgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
		border-top: 1px dotted white;
		border-bottom: 1px dotted white;
	}

	.booksgit .tablist .tab {
		/* width: 100%; */
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.booksgit .tablist .tab li {
		color: #715e3e;
		font-size: 0.875rem;
		width: unset;
	}

	.homelist {
		width: 100%;
		background-color: white;
	}

	.homelist header {
		line-height: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.homelist header h2 {
		color: white;
		font-size: 1rem;
		margin-left: 0.5rem;
	}

	.homelist header a {
		display: inline-block;
		width: 3rem;
		font-size: 0.8rem;
		color: white;
	}

	.homelist ul {
		width: 98%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.homelist ul li {
		width: 32%;
		margin-bottom: 0.5rem;
		position: relative;
	}

	.homelist ul li img {
		margin-top: 0.1rem;
		width: 100%;
	}

	.homelist ul li h3 {
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		position: absolute;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* padding: 0.8rem 0; */
		color: white;
		text-align: center;
		font-weight: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 支持webkit内核的浏览器才能生效 */
		/* overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}

	.homelist ul li span {
		font-size: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角 为圆角 */
		border-radius: 0 0 0 0.6rem;
	}
</style>
